import React, { useState } from "react";
import { Button, Modal ,Form,Radio,Input} from "antd";
import axios from "axios";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

export default function(props){
    const [form] = Form.useForm();
    const [visible,setVisible] = useState(false);
    const openAdd = () => {
        setVisible(true);
    };
    const handleOk = () => {
        // console.log(getFieldsValue());
        axios({
            method:"post",
            url:"/students",
            data: form.getFieldsValue()
        }).then(() => {
            props.show();
            setVisible(false);
        });
       

    };
    const handleCancel = () => {
        setVisible(false);
    };

    const layout = {
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 16,
        },
      };
  
     
      return (
        <div>
            <Button type="primary" onClick={openAdd}>
                增加
            </Button>
            <Modal
                title="增加学生"
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form {...layout} form={form}>
                    <FormItem label="姓名" name="name">
                        <Input />
                    </FormItem>
                    <FormItem label="年龄" name="age">
                        <Input />
                    </FormItem>
                    <FormItem  label="性别" name="gender">
                        
                            <RadioGroup>
                                <Radio value="男">男</Radio>
                                <Radio value="女">女</Radio>
                            </RadioGroup>
                        
                    </FormItem>

                </Form>
            </Modal>
        </div>

      )
}